<template>
    <div class="py-4 px-6">
        <div class="package-options">
            <el-radio-group v-model="packages.scene" size="large">
                <el-radio-button
                    v-for="(item, index) in packages.option"
                    :key="index"
                    :label="item.label"
                    :value="item.type"
                />
            </el-radio-group>
        </div>
        <div class="package-container">
            <div class="flex flex-wrap justify-center">
                <div v-for="(item, index) in packages.lists" :key="index" class="package-item">
                    <div v-if="subscribe.id === item.id" class="current">正在使用</div>
                    <div class="text-3xl font-bold line-clamp-1">{{ item.name }}</div>
                    <div class="mt-4">
                        <price
                            :content="item.sell_price"
                            fontWeight="bold"
                            main-size="38px"
                            minor-size="24px"
                        />
                        <price
                            v-if="item.line_price"
                            class="ml-1"
                            :content="item.line_price"
                            main-size="14px"
                            minor-size="12px"
                            line-through
                            color="#999"
                        />
                    </div>
                    <div class="mt-2 h-[40px] text-base text-tx-secondary line-clamp-2">
                        {{ item.description }}
                    </div>
                    <div class="flex my-4">
                        <el-button
                            v-if="item.is_builtin"
                            type="info"
                            size="large"
                            class="w-full"
                            :disabled="true"
                            plain
                        >
                            免费
                        </el-button>
                        <template v-else>
                            <el-button
                                v-if="item.is_disable"
                                type="info"
                                size="large"
                                class="w-full"
                                :disabled="true"
                                plain
                            >
                                当前套餐已下架
                            </el-button>
                            <el-button
                                v-else-if="!item.is_purchase"
                                type="info"
                                size="large"
                                class="w-full"
                                :disabled="true"
                                plain
                            >
                                不可订阅低版本
                            </el-button>
                            <el-button
                                v-if="!item.is_disable && item.is_purchase"
                                :type="subscribe.id === item.id ? 'warning' : 'primary'"
                                size="large"
                                class="w-full"
                                plain
                                :disabled="isLock && packageId !== item.id"
                                :loading="isLock && packageId === item.id"
                                @click="payNow(item.pricing_id, item.name)"
                            >
                                {{ subscribe.id === item.id ? '续费套餐' : '升级套餐' }}
                            </el-button>
                        </template>
                    </div>
                    <div>
                        <div
                            v-for="(s, i) in item.specifics"
                            :key="i"
                            class="flex items-center text-base font-medium py-[7px]"
                        >
                            <div class="flex items-center mr-2 w-[18px] h-[18px]">
                                <icon
                                    name="el-icon-Select"
                                    :size="18"
                                    color="var(--el-color-primary)"
                                />
                            </div>
                            <span class="text-tx-regular mr-auto">{{ s.name }}</span>
                            <span class="text-tx-regular">{{ s.description }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <payment-optional
            :show="showPay"
            :order-id="orderId"
            :paid-amount="paidAmount"
            :product-name="productName"
            attach="subscribe"
            @close="showPay = false"
            @success="paymentSuccess"
        />
    </div>
</template>

<script setup lang="ts">
import useUserStore from '~/stores/user'
import subscribeApi from '@/api/subscribe'

const userStore = useUserStore()
const subscribe = computed(() => userStore.$state.users.subscribe)

// 套餐信息
const packageId = ref<number>(0)
const packages = ref({} as SubscribePackageResponse)

// 订单信息
const showPay = ref<boolean>(false)
const orderId = ref<number>(0)
const paidAmount = ref<number>(0)
const productName = ref<string>('')

// 发起支付
const {lockFn: payNow, isLock} = useLockFn(async (id: number, name: string) => {
    // 初始数据
    packageId.value = 0
    orderId.value = 0
    paidAmount.value = 0
    productName.value = ''

    // 套餐的ID
    packageId.value = id

    // 创建订单
    const orderInfo = await subscribeApi.place({
        package_id: id
    })

    // 扫码支付
    orderId.value = orderInfo.order_id
    paidAmount.value = orderInfo.paid_amount
    productName.value = name
    showPay.value = true
})

/**
 * 支付成功
 */
const paymentSuccess = async () => {
    showPay.value = false
    await userStore.getUser()
    packages.value = await subscribeApi.package()
}

/**
 * 监听切换
 */
watch(
    () => packages.value.scene,
    async () => {
        const calendar = packages.value.scene
        packages.value = await subscribeApi.package(calendar)
    }
)

onMounted(async () => {
    packages.value = await subscribeApi.package()
})
</script>

<style scoped lang="scss">
.package-options {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
    :deep(.el-radio-button__inner) {
        width: 120px;
    }
}

.package-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .package-item {
        position: relative;
        box-sizing: border-box;
        width: 320px;
        min-height:600px;
        padding: 20px;
        margin: 10px;
        cursor: pointer;
        border: 1px solid var(--el-border-color-light);
        border-radius: 8px;
        &.active,
        &:hover {
            background-color: var(--el-color-primary-light-9);
            border-color: var(--el-color-primary);
        }
        .current {
            position: absolute;
            right: 0;
            padding: 4px 12px;
            font-size: 12px;
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-8);
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
    }
}
</style>
